<template>
	<view class="page">
		<u-tabs v-if="allCoupon!='order'" bg-color='#FFFFFF' active-color='#09C15F' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view style="width: 100%;height: 15px;"></view>
		<view class="u-wrap">
			<view class="coupon" v-for="(item,index) in couponList" :key="index">
				<view class="left">
					<view class="sum">
						￥
						<text class="num">{{item.money}}</text>
					</view>
					<view class="type"><span v-if="item.type==='satisfy'">满{{item.satisfy_money}}元可用</span></view>
				</view>
				<view class="right">
					<view class="top">
						<view class="title">
							<text class="tag" :class="{'spec':item.type==='direct'}">{{item.type==='direct'?'无门槛优惠':'满金额优惠'}}</text>
							<text>{{item.name}}</text>
						</view>
						<view class="bottom">
							<view class="date u-line-1">{{item.start_time}}至{{item.end_time}}</view>
							<!-- <view class="immediate-use" v-if="allCoupon==='order'" @click="toOrder(item)">立即使用</view> -->
							<!-- <view class="immediate-use" v-if="allCoupon==='me'" @click="toIndex()">去使用</view> -->
						</view>
					</view>
					<view class="tips">
						<view class="explain">
							<view class="immediate-use" v-if="allCoupon==='order'" @click="submitOrder(item)">立即使用</view>
							<view class="immediate-use" v-if="allCoupon==='me'&&type==='unused'" @click="toIndex()">去使用</view>
							<view class="immediate-use" style="color: grey;" v-if="allCoupon==='me'&&type==='used'">已使用</view>
							<!-- <u-icon name="zhuanfa" class="transpond" :size="24"></u-icon> -->
							<!-- <text></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 'unused',
			list: [{
					name: '未使用',
					count: ''
				}, {
					name: '已使用',
					count: ''
				}, {
					name: '已过期',
					count: ''
			}],
			current: 0,
			couponList: [],
			req:'',//商品选择时传来的参数
			allCoupon: ''
		}
	},
	onShow(){
	  this.getUserCoupon()
	  this.getUserCouponNum('unused')
	  this.getUserCouponNum('used')
	  this.getUserCouponNum('expired')
	},
	onLoad(options) {
		if(options.type=='allCoupon'){
		      this.allCoupon='home';
		      this.getShopCouponList()
		    }else if(options.type=="order"){
		      this.allCoupon='order';
		      this.req=JSON.parse(options.params);
		      this.type = 'unused';
		      this.getUserCoupon()
		    }else{
		      this.allCoupon='me';
		      this.getUserCoupon();
		    }
	},
	methods: {
		
		change(e) {
			this.current = e
			if(e==0){
				this.type = 'unused'
			} else if(e==1){
				this.type = 'used'
			} else if(e==2){
				this.type = 'expired'
			}
			this.getUserCoupon()
		},
		
		async toOrder(data){
		  this.req.coupon_id=data.coupon_id
		  let userToken=uni.getStorageSync('userToken');
		  /* const res=await this.$api.useCoupon(this.req)
		     if(res.data.level=='success'){//更新商品金额
			   this.$store.dispatch('setCoupon',{id: data.id,coupon_id: data.coupon_id,name: data.name});
		       wx.navigateBack({delta:1})
		     }else{
		       this.$currency.showToast(res.data.message)
		   } */
		},
		
		//预览订单
		async submitOrder(data){
		    wx.showLoading({
				title: '加载中'
			})
			this.req.coupon_id=data.coupon_id
		    /* let userToken=wx.getStorageSync('userToken') */
		    let res=await this.$api.submitOrder(this.req,this.$baseUrl)
		    if(res.data.level=="success"){
		        wx.hideLoading()
				this.$store.dispatch('setCoupon',{id: data.id,coupon_id: data.coupon_id,name: data.name});
				wx.navigateBack({delta:1})
		  } else {
			  wx.hideLoading()
			  wx.showToast({
			  	title: res.data.message,
			  	icon: 'none'
			  })
		  }
		},
		
		//获取我的优惠券
		async getUserCoupon(){
		    let userToken=uni.getStorageSync('userToken');
		    const res=await this.$api.getUserCoupon({user_token:userToken,type: this.type},this.$baseUrl);
		    if(res.data.level=='success'){
		        this.couponList = res.data.data
				this.couponList.forEach((item,index) => {
					if(item.start_time&&item.start_time.length>10){
						item.start_time = item.start_time.substring(0,11)
					}
					if(item.end_time&&item.end_time.length>10){
						item.end_time = item.end_time.substring(0,11)
					}
				})
		    }
		},
		
		//获取优惠券数量
		async getUserCouponNum(type){
		    let userToken=uni.getStorageSync('userToken');
		    const res=await this.$api.getUserCoupon({user_token:userToken,type: type},this.$baseUrl);
		    if(res.data.level=='success'){
				let count = res.data.data.length>0?res.data.data.length:''
		        if(type=="unused"){
					this.list[0].count = count
				} else if(type=='used'){
					this.list[1].count = count
				} else if(type=='expired'){
					this.list[2].count = count
				}
		    }
		},
		
		toIndex(){
			wx.switchTab({
			    url:"/pages/index/index"
			 });
		},
		
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #EEEEEE;
}
.u-wrap {
	padding: 0 24rpx;
}
.coupon {
	margin-bottom: 40rpx;
	width: 700rpx;
	height: auto;
	background-color: #ffffff;
	display: flex;
	.left {
		width: 150px;
		/* padding: 0 30rpx; */
		background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.sum {
			/* margin-top: 50rpx; */
			font-weight: bold;
			font-size: 32rpx;
			.num {
				font-size: 60rpx;
			}
		}
		.type {
			/* margin-bottom: 50rpx; */
			font-size: 24rpx;
		}
	}
	.right {
		padding: 20rpx 20rpx 0;
		font-size: 28rpx;
		width: 280px;
		.top {
			border-bottom: 2rpx dashed $u-border-color;
			.title {
				/* margin-right: 60rpx; */
				line-height: 40rpx;
				.tag {
					padding: 4rpx 20rpx;
					background-color: rgb(73, 154, 201);
					border-radius: 20rpx;
					color: #ffffff;
					font-weight: bold;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
				.spec{
					background-color: #30d0a6;
				}
			}
			.bottom {
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				.date {
					font-size: 12px;
					flex: 1;
				}
				.immediate-use {
					height: auto;
					padding: 0 20rpx;
					font-size: 24rpx;
					border-radius: 40rpx;
					line-height: 40rpx;
					color: rgb(117, 142, 165);
					border: 2rpx solid rgb(117, 142, 165);
				}
			}
		}
		.tips {
			width: 100%;
			line-height: 50rpx;
			/* display: flex; */
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.transpond {
				margin-right: 10rpx;
			}
			.explain {
				/* display: flex;
				align-items: center; */
			}
			.particulars {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				padding-top: 8rpx;
				border-radius: 50%;
				background-color: $u-type-info-disabled;
				text-align: center;
			}
			.immediate-use {
				margin: 5px 3px 5px 0px;
				float: right;
				height: auto;
				padding: 0 20rpx;
				font-size: 24rpx;
				border-radius: 40rpx;
				line-height: 40rpx;
				color: rgb(117, 142, 165);
				border: 2rpx solid rgb(117, 142, 165);
			}
		}
	}
}
</style>
